<template>
	<view class="container">
		<search-box :canInput="true" :canCancle="true" :Keyword="Keyword" @searchConfirm="searchConfirm" @searchCancel="searchCancel"></search-box>
		<view v-show="!isSearching">
			<view class="title">搜索历史</view>
			<view class="tag-list">
				<text class="tag-item" v-for="(item, index) in histroys" :key="index" @tap="search(item)">{{ item }}</text>
			</view>
			<view class="title">热门搜索</view>
			<view class="tag-list">
				<text class="tag-item" v-for="(item, index) in hots" :key="index" @tap="search(item)">{{ item }}</text>
			</view>
		</view>
		<view v-if="isSearching">
			<mescroll-uni top="100" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
				<view class="common-list">
					<block v-for="(item, index) in pageGeneral" :key="index"><yxyl-common :type="item.itemStyle" :rowData="item.items"></yxyl-common></block>
					<view class="noText" :class="{ hidden: !noText }">暂无相关数据</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
import searchBox from '@/components/search-box/search-box.vue';
import yxylCommon from '@/components/yxyl-common/yxyl-common.vue';
import MescrollUni from 'mescroll-uni';
export default {
	components: { searchBox, yxylCommon, MescrollUni },
	data() {
		return {
			hots: [],
			histroys: uni.getStorageSync('searchHistory') || [],
			isSearching: false,
			Keyword: '',
			pageGeneral: [],
			downOption: {
				use: true, // 是否启用下拉刷新; 默认true,
				auto: false
			},
			upOption: {
				use: true, // 是否启用上拉加载; 默认true
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				noMoreSize: 2, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示,
				empty: false,
				textNoMore: '---没有了---'
			}
		};
	},
	onLoad() {
		this.getTagClound(2);
	},
	computed: {
		noText() {
			return this.pageGeneral.length == 0;
		}
	},
	onShareAppMessage(e) {
		return {
			path: this.$handlerAppMessagePath()
		};
	},
	methods: {
		searchConfirm: function(e) {
			this.goToSearch(e);
		},
		searchCancel: function() {
			if (this.isSearching) {
				this.Keyword = '';
				this.isSearching = false;
			} else {
				if (getCurrentPages().length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '../index/index'
					});
				}
			}
		},
		getTagClound(type) {
			var that = this;
			this.$http
				.request({
					url: 'api/HomePage/SearchTag'					
				})
				.then(res => {
					
						this.hots = res;
					
					// #ifdef H5
					that.$wechat.share({
						link: that.$handlerAppMessagePath()
					});
					// #endif
				});
		},
		search(text) {
			this.goToSearch(text);
		},

		goToSearch(text) {
			this.pageGeneral = [];
			this.Keyword = '';
			if (this.histroys.indexOf(text) > -1) {
				this.histroys.splice(this.histroys.indexOf(text), 1);
			}
			this.histroys.unshift(text);
			this.Keyword = text;
			uni.setStorage({
				key: 'searchHistory',
				data: this.histroys
			});
			this.isSearching = true;
			this.getSearchResult();
		},
		async downCallback(mescroll) {
			try {
				this.pageGeneral = [];
				this.getSearchResult();
				mescroll.endSuccess();
			} catch (e) {
				mescroll.endErr();
			}
		},
		async upCallback(mescroll) {
			try {
				
				var Count = await this.getSearchResult();
				mescroll.endSuccess(Count, Count > 0);
			} catch (e) {
				// 失败隐藏下拉加载状态
				mescroll.endErr();
			}
		},
		async getSearchResult() {
			var that = this;
			var result = await this.$http.request({
				url: 'api/HomePage/SearchResult',
				data: {					
					Filter: that.Keyword,
					MaxResultCount:30,
					SkipCount:that.pageGeneral.length
				}
			});
			this.pageGeneral = this.pageGeneral.concat(result);
			return result.length;
		}
	}
};
</script>

<style lang="scss" scoped>
.title {
	color: #555555;
	font-size: 30rpx;
	width: 90%;
	margin: 0 auto;
	padding: 10px 0;
}
.tag-list {
	display: flex;
	width: 90%;
	margin: 0 auto;
	flex-wrap: wrap;
	margin-top: 5px;
	.tag-item {
		border-radius: 10px;
		border: 1px solid #999;
		color: #999;
		font-size: 26rpx;
		padding: 2px 5px;
		margin-right: 5px;
		margin-bottom: 10px;
	}
}
.common-list {
	width: 95%;
	margin: 0 auto;
}
</style>
